<template>
  <!-- 企业 -->
  <div class="selectBox">
    <div class="flex justify_between align_center">
      <!-- <div
        class="selectLeft content3 font400 color6"
        @click="showChoose"
      >
        {{ selectName ? selectName : '行业筛选' }}
      </div> -->
      <div class="selectRight">
        <form
          action="/"
          class="search-form"
        >
          <van-search
            v-model="form.keyword"
            placeholder="搜索企业名称"
            @search="onSearch"
            @clear="clear"
          />
        </form>
      </div>
    </div>
  </div>
  <div>
    <van-pull-refresh
      v-model="refreshing"
      disabled
      @refresh="onRefresh"
      class="refresh-content"
    >
      <van-list
        class="content-list"
        v-model:loading="loading"
        :finished="finished"
        @load="loadMore"
        :immediate-check="false"
      >
        <div
          class="college_list"
          v-for="(item, index) in listData"
          :key="index"
          @click="company(item.id)"
        >
          <div class="college_list_box">
            <div>
              <img
                class="college_img"
                :src="item.head_img ? item.head_img : logo_z"
              >
              <!-- <img
                class="college_img"
                :src="item.head_img ? item.head_img : './assets/img/banner2.png'"
              > -->
            </div>
            <div class="college_info">
              <p
                class="college_list_box_p van-ellipsis color1 fontBold content1"
              >
                {{ item.company }}
              </p>
              <div
                class="contentText content3 font400 color3 van-multi-ellipsis--l2"
              >
                {{ item.address }}
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
  <NoData v-if="listData.length === 0" />
  <Choose
    :columns="columns"
    :visible="visible"
    :type="type"
    @closeDialog="closeDialog"
    @confirmValue="confirmValue"
  />
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue'
import { useRouter } from 'vue-router'
import { squareCompany } from '@/api'
import logo_z from '@/assets/img/logo-z.jpg'
const NoData = defineAsyncComponent(() => import('@/components/NoData/index.vue'))
const Choose = defineAsyncComponent(() => import('@/components/Choose/index.vue'))
const loading: any = ref(false)
const finished: any = ref(false)
const refreshing: any = ref(false)
const visible: any = ref(false)
const router = useRouter()
const listData: any = ref([])
const type: any = ref(0)
const selectName: any = ref('')
const form: any = ref({
  page: 1,
  pageSize: 10,
  type: '',
  keyword: ''
})

const columns: any = ref(['地产商', '供应商'])

const closeDialog = () => {
  visible.value = false
}

// const showChoose = () => {
//   visible.value = true
// }

const clear = async () => {
  form.value.keyword = ''
  onRefresh()
}

const confirmValue = (val: any, type: any, index:any) => {
  form.value.type = index
  selectName.value = val
  onRefresh()
  visible.value = false
}

const onSearch = async (val:any) => {
  form.value.keyword = val
  onRefresh()
}

const onRefresh = async () => {
  form.value.page = 1
  const list = await loadDemandList()
  listData.value = list
  refreshing.value = false
}

const loadMore = async () => {
  form.value.page = form.value.page + 1
  const list = await loadDemandList()
  listData.value = [...listData.value, ...list]
  loading.value = false
}

const loadDemandList = async () => {
  // 异步更新数据
  const res: any =
        (await squareCompany({ ...form.value })) || []
  if (!Array.isArray(res) && typeof res.list === 'object') {
    const keys: any = Object.keys(res.list)
    const newRes: any = keys.map((k: any) => res.list[k])
    finished.value = newRes.length < form.value.pageSize
    return newRes
  }

  finished.value = res.list.length < form.value.pageSize
  return res
}

onRefresh()

const company = async (id: any) => {
  router.push({ path: '/square/company', query: { id: id } })
}

</script>

<style lang="less" scoped>
.college_list {
    width: 100%;
    margin: 15px auto;
    background-color: #fff;
    border-radius: 5px;
    .college_list_box {
        display: flex;
        // align-items: center;
        padding: 15px;
        .college_info {
            // display: flex;
            // flex-direction: column;
            // justify-content: space-between;
            .contentText {
                margin-top: 5px;
                line-height: 23px;
            }
        }
        .college_list_box_p {
            line-height: 23px;
            width: 225px;
        }
        .college_img {
            width: 70px;
            height: 70px;
            border-radius: 5px;
            object-fit: cover;
            margin-right: 15px;
        }
        .left12 {
            margin-left: 10px;
        }
    }
}
.selectBox {
    margin-top: 20px;
    .selectLeft {
        width: 130px;
        height: 44px;
        background: #ffffff;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
    }
    .selectRight {
        // 196px
        width: 100%;
        height: 44px;
        background: #ffffff;
        border-radius: 5px;
        overflow: hidden;
    }
}
@media (min-width: 750px) {
  .college_list {
    width: 100%;
    margin: 15px auto;
    background-color: #fff;
    border-radius: 5px;
    .college_list_box {
        display: flex;
        // align-items: center;
        padding: 15px;
        .college_info {
            // display: flex;
            // flex-direction: column;
            // justify-content: space-between;
            .contentText {
                margin-top: 5px;
                line-height: 23px;
            }
        }
        .college_list_box_p {
            line-height: 23px;
            width: 225px;
        }
        .college_img {
            width: 70px;
            height: 70px;
            border-radius: 5px;
            object-fit: cover;
            margin-right: 15px;
        }
        .left12 {
            margin-left: 10px;
        }
    }
}
.selectBox {
    margin-top: 20px;
    .selectLeft {
        width: 130px;
        height: 44px;
        background: #ffffff;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
    }
    .selectRight {
        // 196px
        width: 100%;
        height: 44px;
        background: #ffffff;
        border-radius: 5px;
        overflow: hidden;
    }
}
}
</style>
